<template>
  <!-- 搜索栏 -->
  <div>
  <van-sticky>
    <div id="searchBox">
    <div class="searchBox">
    <div class="jiaHao">
      <van-icon name="plus" @click="jiaHao"/>
    </div>
    <van-search placeholder="请输入" shape="round" @search="onSearch"></van-search>
    <van-icon name="bag" class="bao" />
    </div>
  </div>
  </van-sticky>
   <!-- end搜索栏 -->
   <!-- 导航栏 -->
   <div class="nav">
     <div class="box1" v-for="a in dhl" :key=a>
       <div class="icoBox">
         <i class="iconfont" v-text="a.ico"></i>
       </div>
       <h1>{{ a.name }}</h1>
     </div>
   </div>
   <!-- end导航栏 -->
   <!-- 本周流行菜谱版面 -->
   <div class="lxcp1" v-for="a in lxcp" :key="a" v-bind:style="{ 'background-image': 'url('+ a.bgurl+')'}">
      <p>{{ a.p }}<br>{{ a.br }}</p>
   </div>
   <!-- end本周流行版面 -->
   <!-- 轮播图 -->
   <div class="lbt">
     <van-swipe :autoplay="3000" indicator-color="black" class="swipe">
        <van-swipe-item>
          <div class="lb">
            <p>—— 早餐 ——</p>
            <div class="tp">
            </div>
          </div>
        </van-swipe-item>
        <van-swipe-item>
          <div class="lb">
            <p>—— 早餐 ——</p>
            <div class="tp1">
            </div>
          </div>
        </van-swipe-item>
        <van-swipe-item>
          <div class="lb">
            <p>—— 早餐 ——</p>
            <div class="tp2">
            </div>
          </div>
        </van-swipe-item>
      </van-swipe>
   </div>
   <!-- end轮播图 -->
   <!-- 推荐 -->
  <div class="tj">
    <div class="tjImg">
      <van-image
        width="339"
        height="96"
        src="https://img.yzcdn.cn/vant/cat.jpeg"
      />
    </div>
    <div class="gg">
      <h1>高级吃货的club，爱吃的你不可错过</h1>
      <button>广告</button>
    </div>
  </div>
   <!-- end推荐 -->
   <!-- 本周食材 -->
   <div class="bzsc">
     <h1>本周食材包</h1>
     <h2><router-link to="/more">查看更多</router-link></h2>
   </div>
   <div class="test">
   <div class="tjt">
     <div class="box1">
       <van-image
       width="164"
       height="164"
       src="https://img.yzcdn.cn/vant/cat.jpeg"
      />
      <h1>此生烤过最完美的一只鸡！节日餐桌必备</h1>
      </div>
     <div class="box1">
       <van-image
       width="164"
       height="164"
       src="https://img.yzcdn.cn/vant/cat.jpeg"
      />
      <h1>此生烤过最完美的一只鸡！节日餐桌必备</h1>
      </div>
     <div class="box1">
       <van-image
       width="164"
       height="164"
       src="https://img.yzcdn.cn/vant/cat.jpeg"
      />
      <h1>此生烤过最完美的一只鸡！节日餐桌必备</h1>
      </div>
      <div class="box1">
       <van-image
       width="164"
       height="164"
       src="https://img.yzcdn.cn/vant/cat.jpeg"
      />
      <h1>此生烤过最完美的一只鸡！节日餐桌必备</h1>
      </div>
      <div class="box1">
       <van-image
       width="164"
       height="164"
       src="https://img.yzcdn.cn/vant/cat.jpeg"
      />
      <h1>此生烤过最完美的一只鸡！节日餐桌必备</h1>
      </div>
    <!-- end本周食材 -->
  </div>
  </div>
  <!-- 标签栏 -->
  <van-tabbar
  v-model="active"
  active-color="#07c160"
  inactive-color="#000"
  >
  <van-tabbar-item name="cf" icon="wap-home">下厨房</van-tabbar-item>
  <van-tabbar-item name="sj" icon="shop-collect">市集</van-tabbar-item>
  <van-tabbar-item name="sc" icon="like">收藏</van-tabbar-item>
  <van-tabbar-item name="xj" icon="invition">信籍</van-tabbar-item>
  <van-tabbar-item name="me" icon="manager">我</van-tabbar-item>
</van-tabbar>
  <!-- end标签栏 -->
  <!-- x下拉刷新 -->

  <!-- end下拉刷新 -->
  </div>
</template>

<script>
export default {
    data () {
        return {
            dhl: '',
            lxcp: '',
            active: 'cf'
        };
    },
    created: function () {
        const api = 'http://127.0.0.1:8080/index.json';
        this.axios.get(api).then((response) => {
            this.dhl = response.data.dhl;
            this.lxcp = response.data.lxcp;
        });
    },
    methods: {
        // 加号的点击事件函数
        jiaHao: function () {
        },
        // 搜索框的search事件函数
        onSearch: function () {
        },
        // 厨房好物的点击事件
        cfhw: function () {
        },
        // 厨房问答的点击事件
        cfwd: function () {
        },
        // 排行榜的点击事件
        phb: function () {},
        // 菜谱分类的点击事件
        cpfl: function () {},
        // 下拉刷新
        onRefresh () {
            setTimeout(() => {
                this.$toast('刷新成功');
                this.isLoading = false;
                this.count++;
            }, 500);
        }
    },
    components: {}
};
</script>
<style lang="less" scoped>
@font-face {
  font-family: "iconfont"; /* project id 1572374 */
  src: url("//at.alicdn.com/t/font_1572374_ax74aakywrs.eot");
  src: url("//at.alicdn.com/t/font_1572374_ax74aakywrs.eot?#iefix")
      format("embedded-opentype"),
    url("//at.alicdn.com/t/font_1572374_ax74aakywrs.woff2") format("woff2"),
    url("//at.alicdn.com/t/font_1572374_ax74aakywrs.woff") format("woff"),
    url("//at.alicdn.com/t/font_1572374_ax74aakywrs.ttf") format("truetype"),
    url("//at.alicdn.com/t/font_1572374_ax74aakywrs.svg#iconfont") format("svg");
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
  font-weight: normal;
  font-size: 14px;

}
#searchBox {
  width: 100%;
  height: 44px;
  padding-top: 4px;
  position: relative;
  margin-top: 20px;
  background-color: #fff;
  .jiaHao {
    width: 28px;
    height: 28px;
    position: absolute;
    margin-left: 10px;
    margin-top: 4px;
    text-align: center;
    .van-icon {
      font-size: 20px;
      line-height: 28px;
    }
  }
  .van-search {
    left: 56px;
    background-color: rgba(245, 245, 245, 1);
    font-size: 16px;
    position: absolute;
    padding: 0;
    border-radius: 0;
    width: 264px;
    height: 36px;
  }
  .bao {
    font-size: 28px;
    position: absolute;
    left: 335px;
    line-height: 28px;
    margin-top: 4px;
  }
}
  // 导航栏
.nav{
  height: 80px;
  width: 375px;
  margin-top: 8px;
  padding-top: 8px;
  display: flex;
  justify-content: space-around;
  .box1{
    width: 76px;
    height: 64px;
    .icoBox{
      height: 32px;
      width: 76px;
      text-align: center;
      i{
        font-size: 32px;
        color: rgba(255, 168, 168, 1);
        font-weight: 600;
        line-height: 32px;
        }
      }
      h1{
        width: 76px;
        height: 32px;
        text-align: center;
        color: rgba(80, 80, 80, 1);
        line-height: 32px;
      }
    }
}
  //end导航栏
  // 本周流行菜谱版面
.lxcp1{
    width: 164px;
    height: 128px;
    float: left;
    position: relative;
    text-align: left;
    margin-left: 18px;
    margin-top: 10px;
    background-size: 100% 100%;
    p{
      position:absolute;
      top: 64px;
      left: 14px;
      font-size: 18px;
      color: #fff;
      font-weight: 600;
    }
}
  // end本周流行菜谱版面
  // 轮播图
  .lbt{
    width: 375px;
    height: 100px;
    margin-top: 148px;
    .swipe{
      width: 375px;
      height: 100px;
      .lb{
        width: 100%;
        height: 100%;
        position: relative;
        p{
          color: rgba(80, 80, 80, 1);
          font-size: 18px;
          line-height: 100px;
          display: inline-block;
        }
        .tp{
          display: inline-block;
          position: absolute;
          width: 76px;
          height: 76px;
          right: 10px;
          background-image: url('lb1.jpg');
        }
        .tp1{
          display: inline-block;
          position: absolute;
          width: 76px;
          height: 76px;
          right: 10px;
          background-image: url('lb2.jpg');
          background-size:100% 100%;
        }
      }
    }
  }
  // end轮播图
  // 推荐
.tj{
  width: 339px;
  height: 133px;
  margin-top: 10px;
  margin-left:18px;
  .gg{
    text-align: center;
    h1{
      float: left;
      line-height: 37px;
    }
    button{
      display: inline-block;
      height: 25px;
      width: 48px;
      margin-left: 10px;
    }
  }
}
  //end推荐
  // 本周食材
  .bzsc{
    width: 339px;
    height: 48px;
    margin-left: 18px;
    margin-top: 10px;
    h1{
      float: left;
      line-height: 48px;
      margin-left: 5px;
      font-size: 18px;
      color: rgba(56, 56, 56, 1);
    }
    h2 a{
      float: right;
      line-height: 48px;
      font-size: 15px;
      color: rgba(166, 166, 166, 1);
    }
  }
.test{
  margin-bottom: 20px;
  width: 375px;
  height: 214px;
  overflow: hidden;
  margin-top: 5px;
  .tjt{
    width: 375px;
    height: 214px;
    display: flex;
    justify-content: space-around;
     overflow-y:auto;
     overflow-y: scroll;
    .box1{
      width: 164px;
      height: 214px;
      margin-left: 15px;
      h1{
        font-size: 16px;
        font-weight: bold;
        text-align: left;
        color: rgba(80, 80, 80, 1);
      }
    }
  }
}
.tjt::-webkit-scrollbar{
    display: none;
}
   // end本周食材
</style>
